<template>
  <div>
    <el-card class="search-card">
      <BasicForm
        ref="formData"
        defaultExpandStatus
        :isScalingBtn="false"
        :formItemWidth="'120px'"
        :formColumns="FORM_ITEMS"
        :dataSource="formData"
        :handleSearchForm="handleQueryForm"
        @getFormData="getFormData"
      />
    </el-card>
    <el-card class="table-card">
      <skus-table
        ref="skusTable"
        showActionCol
        showPagination
        :actionColWidth="100"
        :tableHeight="490"
        :dataSource="tableInfo.list"
        :columns="tableInfo.columns"
        :loading="tableInfo.loading"
        :pageSizes="pageSizes"
        :pagination="pagination"
        :total="pagination.total"
        :actionRender="renderTableBtnAction"
        @pageChange="handlePageChange"
        @pageSizeSelect="handlePageSizeChange"
      >
        <div slot="content_context">
          <!-- 按钮操作栏 -->
          <BtnRender :render="renderBtnsBar" />
        </div>
      </skus-table>
    </el-card>
    <!-- 编辑计量单位组 -->
    <UpdateUnitGroup
      :visible.sync="editVisible"
      :uuid="uuid"
      :pageType="0"
      @getTableData="getTableData"
    />
  </div>
</template>
<script>
import BasicForm from '@/components/BasicForm';
import SkusTable from '@/components/skusTable';
import BtnRender from '@/components/JSXRender/BtnRender';
import { getBtnsBar, getTableAction } from '@/utils/getBtnsRender';
import { FORM_ITEMS, TABLE_COLUMNS } from './constants';
import skusPage from '@/mixins/commodity/skusPage';
import {
  getUnitGroupListService,
  exportUnitGroupService
} from '@/api/basics/unitManage/unitGroup';
import {
  setAuthBtnId,
  createExcelByExport
} from '@/utils/bizUtils';
import UpdateUnitGroup from './components/UpdateUnitGroup';

export default {
  mixins: [skusPage],
  components: {
    BasicForm,
    SkusTable,
    BtnRender,
    UpdateUnitGroup
  },
  data () {
    return {
      uuid: '',
      FORM_ITEMS,
      formData: {
        groupName: ''
      },
      tableInfo: {
        list: [],
        columns: TABLE_COLUMNS,
        loading: false,
      },
      editVisible: false,
    }
  },
  mounted () {
    this.getTableData()
  },
  methods: {
    // 渲染按钮操作栏
    renderBtnsBar (h) {
      const btnsBar = [
        {
          label: '导出',
          size: 'mini',
          type: 'primary',
          hasAuth: true,
          loading: this.exportLoading,
          method: this.handleExport,
        },
        {
          label: '新增',
          size: 'mini',
          type: 'primary',
          hasAuth: true,
          method: this.handleAdd,
        }
      ];
      return getBtnsBar(h, btnsBar, this.showBtn, 'start');
    },
    // 渲染表格操作栏按钮
    renderTableBtnAction (h, { row }) {
      const actionList = [
        { label: '编辑', method: this.handleEdit, hasAuth: true }
      ];
      return getTableAction({ h, row, actionList, showBtn: this.showBtn });
    },
    // 获取表格数据 by 查询表单
    async getTableData () {
      setAuthBtnId('查询')
      const data = {
        ...this.paginationParams,
        ...this.formData
      }
      const { retData } = await getUnitGroupListService(data, state => { this.tableInfo.loading = state });
      if (retData) {
        const { results, totalNum } = retData;
        this.tableInfo.list = results;
        this.setTotalNum(totalNum)
      }
    },
    // 导出
    async handleExport () {
      const res = await exportUnitGroupService(this.formData, state => { this.exportLoading = state })
      if (res) {
        createExcelByExport({ excelTitle: '计量单位组', res })
      }
    },
    // 新增
    handleAdd () {
      this.editVisible = true;
      this.uuid = null;
    },
    // 编辑
    handleEdit (row) {
      this.editVisible = true;
      this.uuid = row.uuid;
    }
  }
}
</script>
